<template>
  <div class="avue-form-design">
    <el-container>

      <el-container direction="vertical" style="text-align: center">
        <!-- 头部工具栏 -->
        <div>
          <el-button @click="handleLicenseFile" type="success">下载图片</el-button>
        </div>
        <!-- 主设计区 -->
        <div >
          <avue-license ref="license"
                        :option="optionLicense">
          </avue-license>
        </div>
      </el-container>
    </el-container>


  </div>
</template>

<script>

import AfdField from "~/packages/components/field/index.vue";
import { convertHtmlByParam,loadPdfScript} from '@/framework-core/utils/util'
import { downFile,deepClone } from '@smallwei/avue'
import {getLicenseByApp} from "@/framework-code/api/license";
import {convertImageToBase64} from "./index";
import {delCore, getCore} from "@/framework-core/api/core/api";


export default {
  components: {AfdField},
  data() {
    return {
      title:"",
      option:{},
      appCode: "",
    }
  },
  computed: {
    optionLicense() {
      if(!this.option.column){
        return this.option
      }
      this.option.list = this.option.column.filter(item => item.display);
      return this.option
    }
  },
  created() {
    // loadPdfScript();
    this.appCode = this.$route.query.app;
    this.dataId = this.$route.query.dataId;

    if (this.appCode) {
      getLicenseByApp(this.appCode).then(response => {
        if (response.data.data.data.modelJson) {
          this.option = JSON.parse(response.data.data.data.modelJson);
          this.title = response.data.data.data.name;
        } else {
          this.option.img = "";
          this.option.column = [];
        }
        this.changeItemImg(this.option);
        for (let indexl = 0; indexl < this.option.column.length; indexl++) {
          this.changeItemImg(this.option.column[indexl]);
        }
        getCore("/form/tableData", this.dataId, {"app": this.appCode}).then(response => {
          for (let indexl = 0; indexl < this.option.column.length; indexl++) {
            if (this.option.column[indexl].prop && this.option.column[indexl].dynamic) {
              this.option.column[indexl].text = response.data.data.data[this.option.column[indexl].prop] || "";
              if(this.option.column[indexl].onlyOne) {
                this.title = this.title + "_" + this.option.column[indexl].text;
              }
            }
          }
          if(this.$route.query.doAction && this.$route.query.doAction=="down"){
            let $that = this;
            setTimeout(() => {
              $that.handleLicenseFile()
            }, 500)
          }
        });

      })
    }
  },
  methods: {


    changeItemImg(item) {
      item.img = "";
      if (item.imgUrl) {
        convertImageToBase64(item.imgUrl, function (base64Img, $columnTemp) {
          $columnTemp.img = base64Img
        }, item);
      }
    },

    handleLicenseFile() {
      this.$refs.license.getBase64(this.title).then(file => {
        downFile(file, this.title||new Date().getTime());
      })
    }
  }
}
</script>
<style>
.mylic .field{
  height: auto!important;
}
.el-tag-line {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 14px !important;
  padding: 2px 9px;
}

</style>


